<template>
  <div class="record-detail">
    <div class="base">
      <h6 class="title">反馈详情</h6>
      <div class="content">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="list-item">
              <span class="list-item_label">时间：</span>
              <span class="list-item_content">{{
                detail.create_time | parseTime
              }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="list-item">
              <span class="list-item_label">反馈来源：</span>
              <span class="list-item_content">{{
                getComeFromLabel(detail.come_from)
              }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="list-item">
              <span class="list-item_label">版本：</span>
              <span class="list-item_content">{{ detail.version }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="list-item">
              <span class="list-item_label">联系方式：</span>
              <span class="list-item_content">{{ detail.contact }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="list-item">
              <span class="list-item_label">联盟：</span>
              <span class="list-item_content">{{ detail.union > 0 ? detail.union :'' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="list-item">
              <span class="list-item_label">用户PCID：</span>
              <span class="list-item_content">{{ detail.Pcid }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="list-item">
              <span class="list-item_label">系统：</span>
              <span class="list-item_content">{{ detail.winver }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="list-item">
              <span class="list-item_label">系统版本号：</span>
              <span class="list-item_content">{{ detail.winver_number }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="list-item">
              <span class="list-item_label">设备品牌号：</span>
              <span class="list-item_content">{{ detail.brand_model }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="list-item">
              <span class="list-item_label">录入小组：</span>
              <span class="list-item_content">{{ detail.inputGroup }}</span>
            </div>
          </el-col>
        </el-row>
        <div class="list-item">
          <span class="list-item_label">反馈内容：</span>
          <span class="list-item_content point">{{ detail.content }}</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="list-item">
              <span class="list-item_label">附件：</span>
              <span class="list-item_content">
                <span
                  v-for="(img, index) in imgList"
                  :key="index"
                >
                  <el-popover
                    trigger="hover"
                    popper-class="affix-popover"
                  >
                    <div class="img-wrap um-scroll">
                      <a :href="img.location">
                        <img
                          :src="img.location"
                          alt=""
                        /></a>
                    </div>
                    <a
                      :href="img.location"
                      slot="reference"
                    >
                      <i class="el-icon-picture-outline"></i>
                    </a>
                  </el-popover>
                </span>
              </span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="list-item">
              <span class="list-item_label">操作日志：</span>
              <a
                v-if="uLog"
                class="list-item_content"
                :href="uLog.location"
              >{{
                uLog.time | parseTime
              }}</a>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="process">
      <h6 class="title">
        <span>反馈处理：</span>
        <span
          class="status"
          :class="getStatusClass(detail.status)"
        >{{
          detail.status
            | translateToName(statusOpts, 'status_id', 'status_name')
        }}</span>
      </h6>
      <div class="content">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="list-item">
              <span class="list-item_label">所属模块：</span>
              <span class="list-item_content">{{
                detail.moduleName.join('，')
              }}</span>
            </div>
            <div class="list-item">
              <span class="list-item_label">内容标签：</span>
              <span class="list-item_content">{{
                detail.labelName.join('，')
              }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="list-item">
              <span class="list-item_label">处理小组：</span>
              <span class="list-item_content">{{ detail.groupName }}</span>
            </div>
            <div class="list-item">
              <span class="list-item_label">处理结果：</span>
              <span class="list-item_content">{{ detail.resultName }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="dump">
      <h6 class="title">用户DUMP记录</h6>
      <div class="content">
        <el-table
          max-height="250px"
          :data="dumpList"
        >
          <el-table-column
            label="时间"
            align="center"
            min-width="150"
          >
            <template #default="{ row }">
              {{ row.created_at | parseTime }}
            </template>
          </el-table-column>
          <el-table-column
            label="系统"
            prop="winVer"
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="模块名"
            prop="modName"
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="模块版本"
            prop="modVer"
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="操作："
            align="center"
          >
            <template #default="{ row }">
              <el-button
                :disabled="!row.filePath"
                type="primary"
                size="mini"
                @click="download(row)"
              >下载</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
import { COME_FROM } from '../../constant'
import { getDumpList } from '@/api/feedback'
const comeFromMap = COME_FROM.reduce((obj, t) => {
  obj[t.value] = t.label
  return obj
}, {})
export default {
  name: 'RecordDetail',
  components: {},
  props: {
    detail: {
      type: Object,
      required: true
    },
    statusOpts: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      dumpList: []
    }
  },
  created () {
    this.getDumpList()
  },
  methods: {
    download ({ filePath }) {
      let link = document.createElement('a')
      link.href = filePath
      link.click()
      link = null
    },
    getComeFromLabel (val) {
      return comeFromMap[val] || ''
    },
    getStatusClass (val) {
      const map = {
        1: 'unProcess',
        2: 'processing',
        3: 'procesed'
      }
      return map[val]
    },
    getDumpList () {
      if (!this.detail.Pcid) {
        this.dumpList = []
        return
      }
      getDumpList({
        appid: this.detail.appid,
        pcid: this.detail.Pcid,
        pageIndex: 1,
        pageSize: 66
      }).then(res => {
        this.dumpList = res.data.list || []
      })
    }
  },
  computed: {
    imgList () {
      const attachment = this.detail.attachment || []
      return attachment.filter(t => t.type === 1)
    },
    uLog () {
      const attachment = this.detail.attachment || []
      const log = attachment.find(t => t.type === 2)
      return log && { log, ...JSON.parse(log.info || '{}') }
    }
  }
}
</script>

<style lang="scss" scoped>
.record-detail {
  margin-top: -30px;
  .list-item {
    line-height: 1.5;
    margin-bottom: 10px;
    .el-icon-picture-outline {
      font-size: 24px;
      margin-right: 8px;
    }
  }
  .title {
    display: flex;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 0;
    align-items: center;
  }
  .content {
    padding-left: 30px;
    margin-bottom: 10px;
  }
  .list-item {
    display: flex;
    .list-item_content {
      flex: 1;
      &.point {
        min-height: 50px;
      }
    }
  }

  .status {
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    padding: 3px 6px;
    border-radius: 30px;
    &.unProcess {
      background-color: #bbb;
    }
    &.processing {
      background-color: #f59a23;
    }
    &.procesed {
      background-color: #6aaa03;
    }
  }
}

.el-popover.el-popper.affix-popover {
  .img-wrap {
    max-width: 600px;
    max-height: 660px;
    img {
      width: 100%;
      object-fit: contain;
    }
  }
}
</style>
